// 首页展示界面
<template>
<el-card class="box-card">
  <div v-for="(item,o) in menuLifeList" :key="o" class="text item" style="height: 100%;" > 
        <div>
          <div class="onediv">
              {{item.lifeDate}}
              
          </div>
          <div class="twodiv">
            <!-- 图片大图预览 -->
            <!-- (item.lifeUrl||'').split(',')[0]  --  获取menuLifeList数组里面的lifeUrl字段，并以逗号切割为数组并获取下标为0的元素
                (item.lifeUrl||'').split(',')  --  获取menuLifeList数组里面的lifeUrl字段，并以逗号切割为数组获取数组中的元素  
            -->
            <div class="demo-image__preview">
              <el-image 
                style="width: 160px; height: 180px"
                :src="(item.lifeUrl||'').split(',')[0]" 
                :preview-src-list="(item.lifeUrl||'').split(',')">
              </el-image>
              <i class="fui-icon icon-album-num"></i>
            </div>
          </div>
          <div class="photoNumber">
              {{"共"+(item.lifeUrl||'').split(',').length+"张图"}}
          </div>
          <div class="threediv">
            {{item.lifeDescribe}}
          </div>
        </div>
  </div>

</el-card>
</template>

<script>
export default({
  data() {
      return {
        menuLifeList:[],
        number: 0,
      }
    },
    //页面进行初始化的时候开始调用回调函数
  created(){
    //动态获取相册信息
    this.getMenuLifeList()
    //设定模式选中按钮
    // this.defaultActive = window.sessionStorage.getItem("activeMenu")

  },
  methods:{
    //查询相册
    async getMenuLifeList() {
      const {data: result} =  await this.$http.get('/life/getLifeList')
      if(result.status !== 200) return this.$message.error("相册菜单查询失败！")
      //如果请求正常,则将返回值结果赋值给vue的data
      this.menuLifeList = result.data
    },
  }
});
</script>

<style lang="less" scoped>
.text {
    font-size: 24px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 1000px;
    margin-left: 230px;
  }
  .onediv{
    width: 200px;
    margin: 80px 8px 80px;
    padding: 0px 6px 0px;
    padding-left: 0px;
  }
  .twodiv{
    width: 200px;
    margin: -190px 230px 80px;
    padding: 0px 6px 0px;
  }

  .threediv{
    width: 400px;
    
    margin: -270px 470px 91px;
    padding: 0px 6px 0px;
  }
.photoNumber{
    font-size: 14px;
    width: 59px;
    margin: -106px 396px 91px;
    padding: 0px 6px 0px;
}
</style>
